<template>
	<div class="container">
		<!-- 标题区域 -->
		<div class="title-card card">
			<div class="card-header">

				<div class="card-tag bg-blue"></div>
				<span class="card-title">学习任务名称</span>
			</div>
			<div class="jindu" style="text-align: right;padding-right: 15px;margin-top:-35px;"
				:class="(jindu < 0.01) ? 'jindu1' : ''"><span>{{ jindu }}</span>%</div>
			<div class="card-content">
				<!-- 播放视频控件 -->
				<video id="studyVideo" controls :src="videoUrl" :show-progress="true" :show-fullscreen-btn="true"
					:show-play-btn="true" :show-center-play-btn="true" autoplay :enable-progress-gesture="true"
					@play="onVideoPlay" @pause="onVideoPause" @ended="videoOk"></video>
			</div>
		</div>
		<!-- 视频展示区域 -->
		<div class="videos-card card">
			<div class="card-header">
				<div class="card-tag bg-blue"></div>
				<span class="card-title">其他视频任务</span>
			</div>
			<div class="card-content">
				<div class="video-grid">
					<!-- 九宫格视频项 -->
					<div class="video-grid-item" v-for="(video, i) in videoList" :key="i"
						@click="gotoStudyPage(video, i)" v-if="index != i">
						<!-- 视频容器 -->
						<div class="video-container">
							<img src="/static/bg_01.jpg" class="video-thumb">
							<u-icon name="play-circle-fill" color="#66666690" size="40" class="play-icon"></u-icon>
						</div>
						<div class="video-info">
							<div class="jindu jindu1" v-if="i == 0"><span>33</span>%</div>
							<div class="jindu jindu2" v-if="i == 1"><span>62</span>%</div>
							<div class="jindu jindu3" v-if="i == 2"><span>85</span>%</div>
							<!-- <div class=""><u-tag text="标签" plain size="mini"> </u-tag></div> -->
							<div class="title">学习如何处理突发情况</div>
						</div>
						<!-- 去学习按钮 -->
						<img src="/static/videoBtn.png" class="study-btn">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { listTask, getTask, delTask, addTask, updateTask } from "@/api/demo/task/task";

import {
	mapState
} from 'vuex';
export default {
	computed: {
		...mapState(['user']),
		// 图片列表
		imageList() {
			return this.study?.imagePaths ? this.study.imagePaths.split(",") : [];
		},
	},
	data() {
		return {
			id: 0,
			index: null,
			videoUrl: null,
			videoContext: null,
			videoNowTime: 0,
			videoDuration: 0,
			study: true, // 示例数据，实际项目中可能从状态或API获取
			jindu: 0,
		}
	},
	created() {
		console.log(11111)
	},
	mounted() {
		this.id = this.$route.query.id;
		this.index = this.$route.query.index;
		console.log(this.$route.query)
		this.getStudyTask();
	},
	methods: {
		// 获取学习任务详情
		getStudyTask() {
			getTask(this.id)
				.then(res => {
					if (res.code == 200) {
						this.study = res.data;
						this.videoList = this.study?.videoPaths ? this.study.videoPaths.split(",") : [];
						if (this.videoList.length) {
							this.videoUrl = process.env.VUE_APP_BASE_API+this.videoList[this.index];
						}

					}
				})
				.catch(err => {
					console.log(err, 'catch');
				});
		},

		// 监听视频播放进度
		// },

		// 视频播放完成
		videoOk() {
			// 视频播放完成后请求接口
			this.onVideoPause();
		},

		// 保存视频播放进度
		addStudylength(videoNowTime) {
		},
		
		// 视频开始播放时启动定时器
		onVideoPlay() {
			this.progressTimer = setInterval(() => {
				const video = document.getElementById('studyVideo');
				if (video) {
					this.videoProgress({
						detail: {
							currentTime: video.currentTime,
							duration: video.duration
						}
					});
				}
			}, 1000);
		},
		
		// 视频暂停时清除定时器
		onVideoPause() {
			if (this.progressTimer) {
				clearInterval(this.progressTimer);
				this.progressTimer = null;
			}
		},
		
		// 处理视频进度更新
		videoProgress(e) {
			// 实现原有的进度处理逻辑
		},
	},
	beforeDestroy() {
		// 组件销毁前清除定时器
		this.onVideoPause();
	}
}
</script>

<style scoped>
/* 全局样式 */
.container {
	min-height: 100vh;
	background-color: #f8fafc;
	padding: 20px;
}

/* 卡片样式 */
.card {
	background-color: #ffffff;
	border-radius: 16px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	padding: 30px 30px 20px;
	position: relative;
}

.card-tag {
	width: 8px;
	height: 18px;
	border-radius: 4px;
	margin-right: 16px;
}

.bg-blue {
	background-color: #3c9cff;
}

.card-title {
	font-size: 18px;
	font-weight: 500;
	color: #333333;
}

.card-content {
	padding: 0 30px 30px;
}

/* 标题卡片 */
.title-card .card-content {
	padding: 20px 30px 40px;
}

/* 视频区域 */
.video-grid {
	flex-wrap: wrap;
	justify-content: space-between;
}

.video-grid-item {
	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid #f1f1f1;
}

.video-container {
	position: relative;
	width: 150px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
}

.video-info {
	padding: 0 10px;
	width: calc(100% - 190px);

	.title {
		color: #666;
		font-size: 13px;
	}
}

.jindu {
	font-family: fantasy;
	color: #3c9cff;
	font-size: 12px;
	padding: 8px 0;

	span {
		font-family: fantasy;
		font-size: 16px;
	}
}

.jindu1 {
	color: #f56c6c;
}

.jindu2 {
	color: #f9ae3d;
}

.jindu3 {
	color: #5ac725;
}

.study-btn {
	height: 40px;
	margin: 20px 0;
	width: 40px;
}

.video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.play-icon .iconfont {
	color: #ffffff;
	font-size: 30px;
}

/* 视频样式 */
video {
	width: 100%;
	height:600px;
	background-color: #000;
	border-radius: 8px;
}
</style>
